<template>
    <div>
        <header>
            <h1 class="tc fn pr">
                <router-link class=" pa cfff" to="/home" tag="span" style="left:20rem;top: 5rem;">
                    <i class="el-icon-arrow-left  f40 "></i>
                </router-link>
                消息
            </h1>
        </header>
        <main>
            <div class="massage">
                <div v-for="el in dataArr" :key="el.id">
                     <p class="mb20 f25">{{ el.messageType }}<span class="fr">{{ el.createTime | getDate }}</span></p>
                     <p>{{ el.message }}</p>
                </div>
            </div>
        </main>
    </div>
</template>
<script>
import { messageList } from '../../../api/using';

export default {
    data() {
        return {
            dataArr: []
        }
    },
    mounted() {
        this.init();
    },
    filters: {
        // getDate(val) {
        //     let arr = val.split('T');
        //     return arr[0] + ' ' + arr[1].split('.')[0];
        // }
        getDate(val) {
            let t= val.substr(0,10);
            let d = new Date(val);
            let res = t+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
            return res;
        }
    },
    methods: {
        init() {
            messageList({id: '4'})
            .then(r => {
                this.dataArr = r.data;
            })
            .catch(e => {
            })
        },
        navigation() {
            console.log('导航');
        }
    }
}
</script>

<style scoped>


* {
    box-sizing: border-box;
}

header {
    background-color: #3284fc;
    height: 434rem;
    padding-top: 60rem;
}

header>h1 {
    font-size: 32rem;
    color: #fff;
    margin-bottom: 36rem;
}

main {
    position: relative;
    width: 100%;
}

main .massage {
    position: absolute;
    top: -290rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20rem;
    width: 710rem;
    background-color: #fff;
    padding: 0 20rem;
}
main .massage div {
    padding: 36rem 10rem;
    border-bottom: 7rem solid #f7f7f7;
}
main .massage div:last-child{
    border-bottom: 7rem solid #fff;
}
main .massage div p:first-child span{
    font-size: 22rem;
    color: #adadad;
}
main .massage div p:last-child{
    font-size: 23rem;
    color: #333; 
}
</style>